<template>
  <div>
    <register-command
      name="generateData"
      :config="generateDataCommandConfig"
      extend="copy"
    />
    <register-command
      name="downloadImage"
      :config="downloadImageCommandConfig"
      extend="copy"
    />
    <register-command
      name="runCurrentNode"
      :config="runCurrentNodeCommandConfig"
      extend="copy"
    />
  </div>
</template>

<script>
import { RegisterCommand } from 'vue-flowchart-editor'
import axios from 'axios'

export default {
  name: 'CustomCommand',

  components: {
    RegisterCommand
  },

  inject: ['root'],

  props: ['save', 'download', 'log', 'savebeforerun', 'flowchartId'],


  data() {
    const { propsAPI } = this.root
    const { save, download, log, savebeforerun, flowchartId } = this
    return {
      generateDataCommandConfig: {
        queue: false, // 是否进入列队，默认为 true
        enable(/* editor */) {
          // 命令是否可用
          return true
        },
        execute(/* editor */) {
          // 正向命令逻辑
          console.log('执行正向命令')
          const data = propsAPI.save()
          console.log(data)
          console.log(JSON.stringify(data))
          save(data)
          alert(JSON.stringify("保存成功！"))
        },
        back(/* editor */) {
          // 反向命令逻辑
          console.log('执行反向命令')
        }
      },
      downloadImageCommandConfig: {
        queue: false,
        enable() {
          return true
        },
        execute() {
          download()
        },
        back() {
        }
      },
      runCurrentNodeCommandConfig: {
        queue: true,
        enable() {
          return true
        },
        // async 和 await 用来实现异步编程
        async execute() {
          const node = propsAPI.getSelected()[0]
          const nodeModel = node.getModel()
          const graphData = propsAPI.save()
          if(nodeModel.alname === 'exampleData' || nodeModel.alname === 'FileUpload'){
            // log(`run ${nodeModel.label}`, true)  //输出时间
            // 此处将编辑状态改为只读，并保存流程图数据
            await savebeforerun(propsAPI.save())
            const response = await axios.post(
              `/api/Task/submitTask`,
              {
                flowId:flowchartId,
                nodeId: nodeModel.id, // 执行节点的id名字
                algorithm:nodeModel.alname,
                inputId: nodeModel.id, // 选择的数据集名字 用来去redis读数据
                datasetsKey: nodeModel.config.selectDatasets,
                config: nodeModel.config
              }
            )
            // todo-此处保存流程图数据
          }
          else{
            if (!node) {
              return
            }
            if (!graphData.edges) {
              return
            }
            if (!nodeModel.isAggregator) {
              // 此处将编辑状态改为只读，并保存流程图数据
              await savebeforerun(propsAPI.save())
              const response = await axios.post(
                `/api/Task/submitTask`,
                {
                  flowId:flowchartId,
                  nodeId: nodeModel.id, // 执行节点的id名字
                  algorithm:nodeModel.alname,
                  inputId: nodeModel.inputNode,// 选择的数据集名字 用来去redis读数据
                  datasetsKey: nodeModel.config.selectDatasets,
                  config: nodeModel.config
                }
              )
            }
            if (nodeModel.isAggregator) {
              // 此处将编辑状态改为只读，并保存流程图数据
              await savebeforerun(propsAPI.save())
              const response = await axios.post(
                `/api/Task/submitTask`,
                {
                  flowId:flowchartId,
                  nodeId: nodeModel.id, // 执行节点的id名字
                  algorithm:nodeModel.alname,
                  leftinputId: nodeModel.leftInputNode,// 选择的数据集名字 用来去redis读数据
                  rightinputId: nodeModel.rightInputNode,// 选择的数据集名字 用来去redis读数据
                  datasetsKey: nodeModel.config.selectDatasets,
                  config: nodeModel.config
                }
              )
            }
          }
        },
        back() {}
      }
    }
  }
}
</script>
